<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery基础教程之效果-attr与prop的区别</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>attr与prop的区别</h1>
<hr>


<div style="text-align: center">
    <a href="https://www.tmall.com" action="goshopping" id="url">天猫网</a><br>
    <input type="checkbox" checked id="rememberme">记住我
</div>
<hr>
<div style="text-align: center">
    <input type="button" value="修改链接地址使用attr" id="btn1"><input type="button" value="修改链接地址使用prop" id="btn2"><br>
    <input type="button" value="修改action使用attr" id="btn3"><input type="button" value="修改action使用prop" id="btn4"><br>
    <input type="button" value="是否记住我使用attr" id="btn5"><input type="button" value="是否记住我使用prop" id="btn6"><br>
</div>
<script>
    $(function(){
        $("#btn1").click(function(){
            $("#url").text('京东网');
            $("#url").attr("href","https://www.jd.com");
        })
        $("#btn2").click(function(){
            $("#url").text('京东网');
            $("#url").prop("href","https://www.jd.com");
        })
        $("#btn3").click(function(){
            $("#url").attr("action","剁手节快乐！");
            alert($("#url").attr('action'));
        })
        $("#btn4").click(function(){
            $("#url").prop("action","剁手节快乐！");
            alert($("#url").attr('action'));
        })
        $("#btn5").click(function(){
            alert($("#rememberme").attr('checked'));
        })
        $("#btn6").click(function(){
            alert($("#rememberme").prop('checked'));
        })

    })
</script>
</body>
</html>


